<template>
    <div class="index" @scroll="scroll">
        <col-header v-show="show"></col-header>
        <div class="banner-box">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in banners" :key="item.id">
                    <img class="banner" :src="item.picUrl" alt="">
                </van-swipe-item>
            </van-swipe>
            <my-set></my-set>
        </div>
        <!-- 砍价列表 -->
        <div class="bargin good-item" @click="$router.push('/barginList')">   
            <my-goods-header>全民砍价</my-goods-header>
            <my-card :good="barginList"></my-card>
        </div>
        <!-- 精选专题 -->
        <div class="good-item">
            <my-goods-header>精选专题</my-goods-header>
            <div class="list-box">
                <ul class="news-list" :style="{
                    width: 370 * news.length + 'px' 
                }">
                    <li v-for="item in news" :key="item.id">
                        <img :src="item.pic" alt="">
                        <h3 v-html="item.title"></h3>
                        <p>{{item.descript}}</p>
                    </li>
                </ul>
            </div>
            
        </div>
        <!-- 人气推荐 -->
        <div class="bargin good-item">   
            <my-goods-header>人气推荐</my-goods-header>
            <div class="recomend">
                <rec-card v-for="(item, index) in recomends" @click="$router.push('/detail?id=' + item.id)" :key="item.id" v-show="index > 8 && index < 13" :item="item"></rec-card>
            </div>
        </div>
    </div>
</template>

<script>
import { getBanners, barginList, getNews, recomend } from '@/api'
import { reactive, onMounted, toRefs, ref, getCurrentInstance } from 'vue'
import mySet from '@/components/mySet/mySet'
import myGoodsHeader from '@/components/myGoodsHeader/myGoodsHeader'
import myCard from '@/components/myCard/myCard'
import colHeader from '@/components/colHeader/colHeader'
import recCard from '@/components/recCard/recCard'
export default {
    components: {
        mySet,
        myGoodsHeader,
        myCard,
        colHeader,
        recCard
    },
    setup() {
        // getCurrentInstance 返回当前组件的上下文实例
        // getCurrentInstance 可以通过 appContext ctx 以及proxy来获取全局属性上面说的方法或者数据
        // 但是 我们要求大家使用appContext 因为当项目打包后ctx和proxy是会发生变化的 从而导致 里面的东西线上找不到
        // let instence = getCurrentInstance()
        // console.log(instence.proxy.$loading);
        // reactive 声明具有响应式的数据的方法 通常咋v3中用来声明引用数据类型
        // ref 声明基本数据类型 ref本事是基于reactive封装
        // reactive声明的变量中的每一个属性都具有响应式
        // reactive接收一个对象
        let state = reactive({
            banners: [],
            barginList: {},
            news: [],
            recomends: []
        })

        let show = ref(false)
        // console.log(banners);

        onMounted(() => {
            // 请求轮播图数据
            // instence.appContext.config.globalProperties.$loading.show('拼命加载中...')
            getBanners().then(res => {
                // console.log(res);
                // banners = res.data
                // console.log(banners);
                state.banners = res.data
                // instence.appContext.config.globalProperties.$loading.hide()
            })

            // 请求砍价列表数据
            barginList().then(res => {
                // console.log(res);
                state.barginList = res.data.goodsMap['99764']
            })

            // 请求精选专题的数据
            getNews().then(res => {
                // console.log(res);
                state.news = res.data
            })

            // 请求人气推荐列表数据
            recomend().then(res => {
                // console.log(res);
                state.recomends = res.data
            })
        })

        // 滚动监听事件
        function scroll(e) {
            // console.log(e.target.scrollTop);
            show.value = e.target.scrollTop > 300 ? true :false
        }
        return {
            ...toRefs(state),
            show,
            scroll
            
        }
    }

    // created() {
    //     console.log(this.$loading);
    // }
}
</script>

<style scoped lang="scss">
.index {
    width: 100%;
    overflow-x: hidden;
}
.banner {
    display: block;
    width: 100%;
}
.banner-box {
    position: relative;
}
.good-item {
    margin-top: 40px;
}
.list-box {
    width: 100%;
    overflow: auto;
}
.news-list {
    display: flex;
    background-color: #fff;
    padding-bottom: 30px;
    li {
        width: 650px;
        margin-left: 20px;
        
        img{
            width: 100%;
            height: 422px;
            border-radius: 20px;
        }
        h3 {
            font-size: 28px;
            color: #333;
            margin-top: 20px;
            margin-bottom: 40px;
        }

        p {
            max-width: 650px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #888;
            font-size: 24px;
        }
    }
}
.recomend {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 20px;
    background-color: #fff;
}
</style>